import { Component, ReactNode } from "react";
import "./App.css";

interface iList {
  name: string;
  img: string;
  act_img: string;
  index: number;
  url: string;
}
interface iState {
  NavList: iList[];
  currentIndex: number;
}
class TabBar extends Component {
  state: iState = {
    NavList: [
      {
        name: "首页",
        img: "/home.svg",
        act_img: "/home_act.svg",
        index: 0,
        url: "Home",
      },
      {
        name: "分类",
        img: "/category.svg",
        act_img: "/category_act.svg",
        index: 1,
        url: "Category",
      },
      {
        name: "购物车",
        img: "/cart.svg",
        act_img: "/cart_act.svg",
        index: 2,
        url: "Cart",
      },
      {
        name: "未登录",
        img: "/my.svg",
        act_img: "/my_act.svg",
        index: 3,
        url: "My",
      },
    ],
    currentIndex: 0,
  };

  render(): ReactNode {
    return (
      <>
        <footer>
          {this.state.NavList.map((item: iList, index: number) => (
            <div
              key={index}
              className="listItem"
              onClick={() => {
                this.setState({
                  currentIndex: index,
                });
              }}
            >
              <img
                src={
                  index === this.state.currentIndex ? item.act_img : item.img
                }
                alt=""
                style={{
                  fill: index === this.state.currentIndex ? "red" : "black",
                }}
              />
              <p
                style={{
                  marginTop: "5px",
                  fontSize: "14px",
                  color: index === this.state.currentIndex ? "red" : "black",
                }}
              >
                {item.name}
              </p>
            </div>
          ))}
        </footer>
      </>
    );
  }
}

export default TabBar;
